<template>
  <!-- 菜单导航管理 -->
  <lay-container fluid="true" class="menu-box">
    <div class="table-box">
      <lay-table :height="`100%`" ref="tableRef6" :loading="loading" children-column-name="children" :columns="columns6"
        :data-source="dataSource6" :default-expand-all="defaultExpandAll6" :expand-index="0" :resize="true"
        :indent-size="10">
        <template #toolbar>
          <lay-button size="sm" @click="to_menuList" type="normal">查询</lay-button>
          <lay-button size="sm" @click="to_menuList" type="normal">刷新</lay-button>
          <lay-button size="sm" @click="to_menuToJSON" type="normal">应用</lay-button>

          <lay-button size="sm" @click="expandAll6(true)">展开全部</lay-button>
          <lay-button size="sm" @click="expandAll6(false)">折叠全部</lay-button>
        </template>
        <template #name="{ row }">
          <lay-icon :class="row.icon"></lay-icon> &nbsp;&nbsp;{{ row.name }}
        </template>
        <template #option="{ row }">
          <lay-button @click="changeVisible11('修改', row)" size="xs" border="green" border-style="dashed">修改</lay-button>
        </template>

      </lay-table>
    </div>

    <lay-layer v-model="Window_show" :btn="Window_btn" title="修改" :area="['700px', '440px']">
      <lay-form :model="model11" ref="layFormRef11" required>
        <lay-tab v-model="tab_show">
          <lay-tab-item title="基本信息" id="1">
            <div style="padding-right:10px;">
              <lay-row>
                <lay-col md="12">
                  <lay-form-item label="名称">
                    <lay-input v-model="model11.name"></lay-input>
                  </lay-form-item>
                </lay-col>
                <lay-col md="12">
                  <lay-form-item label="图标">
                    <lay-input v-model="model11.icon"></lay-input>
                  </lay-form-item>
                </lay-col>
                <lay-col md="12">
                  <lay-form-item label="id">
                    <lay-input v-model="model11.id" disabled></lay-input>
                  </lay-form-item>
                </lay-col>
                <lay-col md="12">
                  <lay-form-item label="父ID">
                    <lay-input v-model="model11.pid"></lay-input>
                  </lay-form-item>
                </lay-col>
                <lay-col md="12">
                  <lay-form-item label="排序" style="width: 100%">
                    <lay-input v-model.number="model11.i" type="number"></lay-input>

                  </lay-form-item>
                </lay-col>
                <lay-col md="12">
                  <lay-form-item label="显示">
                    <lay-select v-model="model11.show" style="width: 100%">
                      <lay-select-option :value="1" label="是"></lay-select-option>
                      <lay-select-option :value="0" label="否"></lay-select-option>
                    </lay-select>
                  </lay-form-item>
                </lay-col>
                <lay-col md="12">
                  <lay-form-item label="类型">
                    <lay-select v-model="model11.type" style="width: 100%" disabled>
                      <lay-select-option value="menu" label="普通菜单"></lay-select-option>
                      <lay-select-option value="catalogue" label="目录"></lay-select-option>
                      <lay-select-option value="blank" label="A链接弹窗"></lay-select-option>
                      <lay-select-option value="modal" label="A链接跳转"></lay-select-option>
                    </lay-select>
                  </lay-form-item>
                </lay-col>
                <lay-col md="12">
                  <lay-form-item label="末端">
                    <lay-select v-model="model11.show" style="width: 100%" disabled>
                      <lay-select-option :value="1" label="是"></lay-select-option>
                      <lay-select-option :value="0" label="否"></lay-select-option>
                    </lay-select>
                  </lay-form-item>
                </lay-col>
              </lay-row>


            </div>
          </lay-tab-item>
          <lay-tab-item title="路由信息" id="2">
            <div style="padding-right:10px;">
              <lay-row space="0">
                <lay-col md="12">
                  <lay-form-item label="路由名称">
                    <lay-input v-model="model11.route_name" disabled></lay-input>
                  </lay-form-item>
                </lay-col>
                <lay-col md="12">
                  <lay-form-item label="路由路径">
                    <lay-input v-model="model11.route_path" disabled></lay-input>
                  </lay-form-item>
                </lay-col>
                <lay-col md="12">
                  <lay-form-item label="组件路径">
                    <lay-input v-model="model11.route_compont_path" disabled></lay-input>
                  </lay-form-item>
                </lay-col>
                <lay-col md="12">
                  <lay-form-item label="路由标题">
                    <lay-input v-model="model11.route_meta_title" disabled></lay-input>
                  </lay-form-item>
                </lay-col>
                <lay-col md="12">
                  <lay-form-item label="身份验证">
                    <lay-select v-model="model11.route_meta_requireAuth" style="width: 100%" disabled>
                      <lay-select-option :value="1" label="是"></lay-select-option>
                      <lay-select-option :value="0" label="否"></lay-select-option>
                    </lay-select>
                  </lay-form-item>
                </lay-col>
                <lay-col md="12">
                  <lay-form-item label="可否关闭">
                    <lay-select v-model="model11.route_meta_closable" style="width: 100%" disabled>
                      <lay-select-option :value="1" label="是"></lay-select-option>
                      <lay-select-option :value="0" label="否"></lay-select-option>
                    </lay-select>
                  </lay-form-item>
                </lay-col>
              </lay-row>
            </div>
          </lay-tab-item>

        </lay-tab>
      </lay-form>
    </lay-layer>
  </lay-container>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { layer } from '@layui/layui-vue'
import { HTTPmenuList, HTTPListToJSON, HTTPMenuUP } from "../../../api/module/user"; //请求模块

const searchQuery = ref({
  address: '',
  identifying: '',
  name: ''
})




const loading = ref(false)
const tableRef6 = ref()

const columns6 = [
  {
    title: '菜单名称',
    key: 'name',
    customSlot: 'name',
    width: '180px'
  },
  {
    title: 'Idx',
    key: 'Idx',

  },
  {
    title: 'Id',
    key: 'id',
    width: '180px'
  },
  {
    title: '父Id',
    key: 'pid',

  },
  {
    title: '排序',
    width: '50px',
    key: 'i'
  },
  {
    title: '可见',
    width: '50px',
    key: 'show'
  },
  {
    title: '类型值',
    width: '70px',
    key: 'type',
  },
  {
    title: '类型名',
    width: '70px',
    key: 'type2',
  },
  {
    title: '操作',
    key: 'option',
    customSlot: 'option'
  }
]

const dataSource6 = ref([])


const defaultExpandAll6 = ref(false)

const expandAll6 = function (flag: any) {
  defaultExpandAll6.value = flag
}
/** 弹窗显示 */
const Window_show = ref(false)
/** 弹窗-表单提交按键组 */
const Window_btn = ref([

  {
    text: "修改",
    callback: () => {
      toSubmit();
    },
  },
  {
    text: "离开",
    callback: () => {
      Window_show.value = !Window_show.value; //弹窗显示
    },
  },
]);


/** 弹窗选项卡默认开启块 */
const tab_show = ref("1")
const model11 = ref({
  Idx: 0,
  id: "",//
  pid: "",//父ID
  icon: "",//图标
  name: "",//菜单名称
  type: "",//A链接时弹窗类型blank原生跳转modal弹层外链_空值表示当前菜单不是链接
  i: 0,//排序
  ids: "",//子ID集合
  pids: "",//父ID集-业务上未使用
  end_node: 1,//末端节点_0否1是
  show: 0,//展示1是0否
  route_name: "",//路由名称
  route_path: "",//路由路径
  route_compont_path: "",//组件路径
  route_meta_title: "",//路由meta_标题
  route_meta_requireAuth: "",//路由meta_需要身份验证
  route_meta_closable: "",//路由meta_可否关闭
})
const layFormRef11 = ref()
const changeVisible11 = (text: any, row: any) => {
  console.log("导航菜单-行点击", text, row);

  if (row != null) {
    model11.value.Idx = row.Idx;
    model11.value.id = row.id;//
    model11.value.pid = row.pid;//父ID
    model11.value.icon = row.icon;//图标
    model11.value.name = row.name;//菜单名称
    model11.value.type = row.type;//A链接时弹窗类型blank原生跳转modal弹层外链_空值表示当前菜单不是链接
    model11.value.i = row.i;//排序
    model11.value.ids = row.ids;//子ID集合
    model11.value.pids = row.pids;//父ID集-业务上未使用
    model11.value.end_node = row.end_node;//末端节点_0否1是
    model11.value.show = row.show;//展示1是0否
    model11.value.route_name = row.route_name;//路由名称
    model11.value.route_path = row.route_path;//路由路径
    model11.value.route_compont_path = row.route_compont_path;//组件路径
    model11.value.route_meta_title = row.route_meta_title;//路由meta_标题
    model11.value.route_meta_requireAuth = row.route_meta_requireAuth;//路由meta_需要身份验证
    model11.value.route_meta_closable = row.route_meta_closable;//路由meta_可否关闭

  } else {
    model11.value = {
      Idx: 0,
      id: "",//
      pid: "",//父ID
      icon: "",//图标
      name: "",//菜单名称
      type: "",//A链接时弹窗类型blank原生跳转modal弹层外链_空值表示当前菜单不是链接
      i: 0,//排序
      ids: "",//子ID集合
      pids: "",//父ID集-业务上未使用
      end_node: 1,//末端节点_0否1是
      show: 0,//展示1是0否
      route_name: "",//路由名称
      route_path: "",//路由路径
      route_compont_path: "",//组件路径
      route_meta_title: "",//路由meta_标题
      route_meta_requireAuth: "",//路由meta_需要身份验证
      route_meta_closable: "",//路由meta_可否关闭
    }

  }
  Window_show.value = !Window_show.value
}

function toSubmit() {
  console.log("保存", model11.value);
  to_menuUP()
}

const page = ref({
  total: 0,//总行数
  limit: 3,//每页行数
  current: 1,//页码
  SearchField: 'name',//默认搜索字段
  SearchOperator: 'LIKE',//默认搜索查询表达式
  SearchaAtistop: "",//默认搜索关键词
  SearchaSort: 'DESC',//默认搜索排序方式ASE,DESC升降序
  SearchaSortField: 'id',//默认排序字段
});

const to_menuList = async () => {
  console.log("导航菜单-原生列表树", page.value);
  layer.load(0, { time: 0 })
  let res = await HTTPmenuList(page.value);
  console.log("导航菜单-原生列表树-HTTP回调", res);
  layer.closeAll()
  if (res.code == 200) {
    dataSource6.value = res.db
    // layer.msg(res.msg, { icon: 1 }, async () => {
    // dataSource.value = res.res.res;//数据集
    // page.value.total = res.res.total;//数据总行数
    // });
  } else {

    layer.msg(res.msg, { icon: 2 });
  }
};
const to_menuToJSON = async () => {
  console.log("导航菜单-生成JSON树", page.value);
  layer.load(0, { time: 0 })
  let res = await HTTPListToJSON(page.value);
  console.log("导航菜单-生成JSON树-HTTP回调", res);
  layer.closeAll()
  if (res.code == 200) {
    layer.msg(res.msg, { icon: 1 }, async () => {

    });
  } else {
    layer.msg(res.msg, { icon: 2 });
  }
};
const to_menuUP = async () => {
  console.log("导航菜单-单项修改", page.value);
  layer.load(0, { time: 0 })
  let res = await HTTPMenuUP({
    Idx: model11.value.Idx,
    id: model11.value.id,
    name: model11.value.name,//菜单名称
    pid: model11.value.pid,//父ID
    show: model11.value.show,//展示1是0否
    i: model11.value.i,//排序
    icon: model11.value.icon,//图标
    end_node: model11.value.end_node,//末端节点_0否1是
    type: model11.value.type,//A链接时弹窗类型blank原生跳转modal弹层外链_空值表示当前菜单不是链接
  });
  console.log("导航菜单-单项修改-HTTP回调", res);
  layer.closeAll()
  if (res.code == 200) {
    layer.msg(res.msg, { icon: 1 }, async () => {
      Window_show.value = !Window_show.value; //弹窗显示
    });
  } else {
    layer.msg(res.msg, { icon: 2 });
  }
};

</script>

<style scoped>
.menu-box {
  width: calc(100vw - 220px);
  height: calc(100vh - 110px);
  margin-top: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.top-search {
  margin-top: 10px;
  padding: 10px;
  height: 40px;
  border-radius: 4px;
  background-color: #fff;
}

.table-box {
  margin-top: 10px;
  padding: 10px;
  height: 700px;
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
}

.search-input {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
}

.table-style {
  margin-top: 10px;
}

.isChecked {
  display: inline-block;
  background-color: #e8f1ff;
  color: red;
}
</style>